<script setup name="Home">
import { ref } from "vue"
import { onMounted, onUnmounted } from 'vue';
import { getmovielist } from '../../api/movie'
import { getcitylist } from '../../api/city'
import MovieCard from './componets/MovieCard.vue'
import PublicHerder from '../../components/PublicHerder.vue'
import { useRouter } from 'vue-router';


const router = useRouter();

let show_city_page = ref(false)
let active = ref(0)
let data_number = 44
let isDataNull = ref(false)
let movie_list = ref([])
let movie_info_list = ref([])
let movie_info_list_a = ref([])
let movie_info_list_b = ref([])
const loading = ref(false)
const finished = ref(false)
let city_landing = ref(false)
let cityName = ref('')
let cityId = ref('')
// let city_overlay_show

const params = ref({
  'cityId': '',
  'pageNum': 1,
  'pageSize': 10,
  'type': 1,
  'k': 7636500,
})
let cityimg = "" +
    "33wPAAAAAXNSR0IArs4c6QAAAUdJREFUKBWNUcFKw0AQnUkQm2q2t0SzDXjIB3jx6NEfUI9ePE" +
    "ov6m946ElEEAQPnoqfIIjH+hOhTQTBFAzYg23GmbQbYkBxYJmd9+ZNZl9srcNzV6mB66ot3/cesyyb" +
    "wz8iiqLVVqvdZ+2NUi5hoLsJEQWlFnFoAe0nSTL+a5bWulsAPgDRjvQhYso6uK5ETBQEL5thuFthjYtw0m" +
    "OGlDTPsPP840l1Ou8IuMegzWcdAY5ct5MxN6zPCYKwh0D3jCnBeZMvtPA0TcYXrFlEucW8GHDlGQwRbtuOcyL" +
    "153R6RQTHhuP8BrZ1+DoaPQtWDZKi+XbB+LOLrZZ+GKzppTylipzfsuF7d7PZrMvg9pLQnOWUIVuuOc5BHMcTg0n" +
    "+sVGdED8Aqc9/dKVsZD+A8CxNR5f1PnP/dZA0iG9YUCkkC3vGDyOu52+oeXRJEaIhBQAAAABJRU5ErkJggg=="


function deletecache() {
    window.localStorage.removeItem('cityId');
    window.localStorage.removeItem('cityName');
}



let city_list = ref([])
let hot_city = ref([])
let city_list_info = ref([])

function gotocity  () {
  router.push({
    path:'/SelectCity'
  })
}


function sleep(ms) {
  console.log('暂停')
  return new Promise(resolve => setTimeout(resolve, ms));
}


let landingShow =ref(false)

async function getlistdata(type, click_type) {
    console.log('paramstype' + params.value.type)
    console.log('type' + params.value.type)
    params.value.cityId = cityId.value
    if (type != params.value.type) {
        params.pageNum = 1
        movie_list.value = []
        movie_info_list.value = []
        finished.value = false
    }
    if (params.value.cityId===''){
      params.value.cityId = '110100'
    }
    params.value.type = type
    // 1、请求数据
    landingShow.value = true
    let movielistdata = await getmovielist(params.value)
    let status = 301
    if (movielistdata.status != 200) {
        isDataNull.value = true
    } else {
        isDataNull.value = false
        // 2、处理数据
        movie_list.value = movielistdata.data.data.films
        // 3、数据加载完成后把加载设置为结束，loading设置为false
        loading.value = false
        // 4、判断数据加载完成后把finished设置为true
        // console.log(movielistdata.data.data.films.length)


        if (movielistdata.data.data.films.length === 0 || movie_info_list.value.length >= movielistdata.data.data.total) {
            finished.value = true
        }
        else {
            if (click_type === 1) {
                params.value.pageNum = params.value.pageNum + 1

            }
            for (let mv_obj of movie_list.value) {
                let actors_list = []
                if (mv_obj.actors) {
                    actors_list = mv_obj.actors
                }
                let actorslist = []
                let str = ''
                let result = ''
                if (actors_list.length > 0) {
                    for (let actors_obj of actors_list) {
                        // 把演员姓名添加到list
                        actorslist.push(actors_obj.name)
                    }
                    // 把演员list转换成一个字符串
                    result = str + actorslist.join(' ')
                } else {
                    result = '无演员'
                }

                let movie_obj = {
                    "filmId": mv_obj.filmId,
                    "name": mv_obj.name,
                    "poster": mv_obj.poster,
                    "actors": result,
                    "director": mv_obj.director,
                    "category": mv_obj.category,
                    "synopsis": mv_obj.synopsis,
                    "filmType": mv_obj.filmType,
                    "nation": mv_obj.nation,
                    "language": mv_obj.language,
                    "videoId": mv_obj.videoId,
                    "premiereAt": mv_obj.premiereAt,
                    "timeType": mv_obj.timeType,
                    "runtime": mv_obj.runtime,
                    "grade": mv_obj.grade,
                    "item": mv_obj.item,
                    "isPresale": mv_obj.isPresale,
                    "isSale": mv_obj.isSale,
                }
                if (click_type === 1) {
                    movie_info_list.value.push(movie_obj)
                    if (type == 1) {
                        movie_info_list_a.value.push(movie_obj)
                    } else if (type == 2) {
                        movie_info_list_b.value.push(movie_obj)
                    }

                }
            }
            if (click_type === 1) {
                if (type == 1 && params.value.pageNum == 1) {
                    window.localStorage.setItem('movie_info_list_a', JSON.stringify(movie_info_list_a.value));
                } else if (type == 2 && params.value.pageNum == 1) {
                    window.localStorage.setItem('movie_info_list_b', JSON.stringify(movie_info_list_b.value));
                }
            }


        }
    }
    // landingShow = false
    // console.log(movie_info_list)
    // console.log(movie_info_list.value.length)

}



function getcachecityinfo(){
  cityId.value = window.localStorage.getItem("cityId")
  cityName.value =  window.localStorage.getItem("cityName")
  console.log(cityId.value)
  console.log(cityName.value)
  if (cityId.value === null) {
    // 如果值不存在，设置默认值
    localStorage.setItem('cityId', '110100');
  }
  if (cityName.value === null) {
    // 如果值不存在，设置默认值
    localStorage.setItem('cityName', '北京');
  }
}
onMounted(() => {
  //   localStorage.setItem('cityId', '110100');
  // localStorage.setItem('cityName', '北京');
    // deletecache()
    // let cityName = ref('')
    // let cityId = ref('')
    getcachecityinfo()
    console.log('在页面加载前请求')
});
</script>

<template>
    <router-view >
            <div>
                <div class="film-list">
                    <div class="home-header">
                      <div class="top-box"></div>
                      <div class="home-title-box">
                        <div class="city" @click="gotocity">
                          <span >{{ cityName?cityName:'请选择城市' }}</span>
                          <img  :src="cityimg" width="6px" height="3px">
                        </div>
                        <span class="title">电影</span>
                      </div>
                    </div>
                  <van-loading v-show="landingShow" />
                    <van-tabs line-height="1px"  height="30px" class="tabs" line-width="50px" line-color="#ff5f16"
                        title-active-color="#ff5f16" v-model:active="active" offset-top="70" sticky animated swipeable>
                        <van-tab title="正在热映" color="#ff5f16" name="1">
                            <div v-show="isDataNull" class="default_box">
                                <img src="@/assets/img/null_page.png" alt="">
                                <hr>
                                <span>暂无内容</span>
                            </div>
                            <van-list class="hide-scrollbar" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                                @load="getlistdata(active, 1)">
                                    <MovieCard :movie_list_data="movie_info_list_a" />
                            </van-list>


                            <div class="list_buttom">

                            </div>
                        </van-tab>


                        <van-tab title="即将上映" color="#ff5f16" name="2">
                            <div v-show="isDataNull" class="default_box">
                                <img src="@/assets/img/null_page.png" alt="">
                                <hr>
                                <span>暂无内容</span>
                            </div>
                            <van-list class="hide-scrollbar" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                                @load="getlistdata(active, 1)">
                                    <MovieCard :movie_list_data="movie_info_list_b" />
                            </van-list>
                            <div class="list_bottom">

                            </div>
                        </van-tab>
                    </van-tabs>

                </div>
            </div>
    </router-view>


</template>

<style scoped src="./css/style.css"></style>